@(title: String = "Spark Notebook", project: String = "Spark Notebook", params: Map[String, String], page:Option[String] = Some("dashboard"), version_hash: Option[String] = None, contents_js_source: Option[String] = None)(stylesheet: Html)(meta: Html)(headercontainer: Html)(header: Html)(site: Html)(script: Html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>@title</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <link rel="shortcut icon" type="image/x-icon" href="@routes.Assets.at("images/favicon.png")">

        <link href='//fonts.googleapis.com/css?family=Bowlby+One+SC' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" href="@routes.Assets.at("ipython/components/jquery-ui/themes/smoothness/jquery-ui.min.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("javascripts/third/jquery/css/jquery.gridster.min.css")" type="text/css" />

        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/c3.min.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/pivot.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/d3-radar/radar-chart.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/d3-pc/d3.parcoords.css")" type="text/css" />

        @stylesheet
        @*<link rel="stylesheet" href="@routes.Assets.at("stylesheets/third/bootstrap/css/bootstrap.min.css")" type="text/css" />*@
        <link rel="stylesheet" href="@routes.Assets.at("javascripts/third/dynatable/jquery.dynatable.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("javascripts/third/leaflet-ext/MarkerCluster.Default.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("javascripts/third/leaflet-ext/MarkerCluster.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("javascripts/third/joint/joint.min.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("ipython/custom/custom.css")" type="text/css" />
        <link rel="stylesheet" href="@routes.Assets.at("stylesheets/user_custom.css")" type="text/css" />

        <script src="@routes.Assets.at("ipython/components/es6-promise/promise.min.js")" type="text/javascript" charset="utf-8"></script>
        <script src="@routes.Assets.at("ipython/components/requirejs/require.js")" type="text/javascript" charset="utf-8"></script>

        <!-- needed to fix pivottable/C3 issues on chrome v48+, see https://github.com/masayuki0812/c3/issues/1566 -->
        <script src="@routes.Assets.at("javascripts/third/pathseg-chrome-svg-fix.js")" type="text/javascript" charset="utf-8"></script>
        <script>
      require.config({
        @version_hash.map(v => s""" urlArgs: "v=$v", """)
        baseUrl: '@routes.Assets.at("/ipython/")',
        paths: {
          nbextensions : '/nbextensions',
          kernelspecs : '/kernelspecs',
          underscore : '@routes.Assets.at("javascripts/third/underscore-min")',
          plotly: '@routes.Assets.at("javascripts/third/plotly-latest.min")',
          backbone : 'components/backbone/backbone-min',
          jquery: 'components/jquery/jquery.min',
          bootstrap: 'components/bootstrap/js/bootstrap.min',
          bootstraptour: 'components/bootstrap-tour/build/js/bootstrap-tour.min',
          jqueryui: 'components/jquery-ui/ui/minified/jquery-ui.min',
          jquerysticky: '@routes.Assets.at("javascripts/third/jquery/js/jquery.sticky-kit.min")',
          moment: 'components/moment/moment',
          codemirror: 'components/codemirror',
          termjs: 'components/term.js/src/term',
          leaflet: '@routes.Assets.at("javascripts/third/leaflet")',
          lodash: '@routes.Assets.at("javascripts/third/lodash")',
          joint: '@routes.Assets.at("javascripts/third/joint/joint.min")',
          LeafletMousePosition: '@routes.Assets.at("javascripts/third/LControlMousePosition")',
          LeafletMarkerCluster: '@routes.Assets.at("javascripts/third/leaflet-ext/markercluster-src")',
          proj4: '@routes.Assets.at("javascripts/third/proj4")',
          epsg: '@routes.Assets.at("javascripts/third/epsg")',
          proj4leaflet: '@routes.Assets.at("javascripts/third/proj4leaflet")',

          svgAsPng: '@routes.Assets.at("javascripts/third/saveSvgAsPng")',
          dynatable: '@routes.Assets.at("javascripts/third/dynatable/jquery.dynatable")',
          knockout: '@routes.Assets.at("javascripts/third/knockout")',
          'knockout-bootstrap': '@routes.Assets.at("javascripts/third/knockout-bootstrap.min")',
          c3: '@routes.Assets.at("javascripts/third/c3.min")',
          d3: '@routes.Assets.at("javascripts/third/d3")',
          dimple: '@routes.Assets.at("javascripts/third/dimple.v2.1.2")',
          pivot: '@routes.Assets.at("javascripts/third/pivot")',
          pivotD3: '@routes.Assets.at("javascripts/third/d3_renderers")',
          pivotC3: '@routes.Assets.at("javascripts/third/c3_renderers")',
          pivotExport: '@routes.Assets.at("javascripts/third/export_renderers")',
          parcoords: '@routes.Assets.at("javascripts/third/d3-pc/d3.parcoords")',
          radarChart: '@routes.Assets.at("javascripts/third/d3-radar/radar-chart")',
          'jquery.gridster': '@routes.Assets.at("javascripts/third/jquery/js/jquery.gridster.min")',
          wizard: '@routes.Assets.at("javascripts/third/jquery/js/jquery.bootstrap.wizard.min")',
          observable: '@routes.Assets.at("javascripts/notebook/observable")',
          equiv: '@routes.Assets.at("javascripts/notebook/equiv")',
          chat: '@routes.Assets.at("javascripts/notebook/chat")',
          checkpoints: '@routes.Assets.at("javascripts/notebook/checkpoints")',
          job_progress: '@routes.Assets.at("javascripts/notebook/job_progress")',
          sidebar: '@routes.Assets.at("javascripts/notebook/sidebar")',
          //'jwerty.js': '@routes.Assets.at("javascripts/third/jwerty.js")'
        },
        shim: {
          underscore: {
            exports: '_'
          },
          backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
          },
          bootstrap: {
            deps: ["jquery"],
            exports: "bootstrap"
          },
          bootstraptour: {
            deps: ["bootstrap"],
            exports: "Tour"
          },
          jqueryui: {
            deps: ["jquery"],
            exports: "$"
          },
          jquerysticky: {
              deps: ["jquery"],
              exports: "$"
          }
        }
      });

      require.config({
        map: {
        '*':{
          'contents': '@contents_js_source.getOrElse("services/contents")'
        }
        }
      });
    </script>

        @meta
    </head>

        <!-- todo bodyclasses (=notebook_app for notebook.scala.html) class="" -->
    <body class="@{page.get} notebook_app data" @Html(params.map(x => s"""data-${x._1}="${x._2}"""").mkString(" "))>

        <noscript>
            <div id='noscript'>
                Spark Notebook requires JavaScript.<br>
                Please enable it to proceed.
            </div>
        </noscript>

        <div id="header">
            <div id="header-container" class="container">
                <div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="@routes.Application.dash("/")" title='dashboard'><img src='@routes.Assets.at("images/logo.png")' alt='Spark Notebook'/> @project</a></div>



  <span id="login_widget">
    <!-- login is always forced for now -->
    <span id="current-user-name">
      @{ params.getOrElse("notebook-user", "") }
    </span>
    @if(params.getOrElse("notebook-user", "").nonEmpty) {
      <a id="logout" class="btn btn-sm navbar-btn" href="/logout">Logout</a>
    }
  </span>


                @headercontainer
            </div>

            <div class="header-bar"></div>

            @header
        </div>

        <div id="site">
        @site
        <footer class="footer">
          <div class="container">
          @if(!_root_.utils.AppUtils.notebookConfig.viewer) {
              <p class="text-muted">Build: | @{_root_.notebook.BuildInfo.toMap.toList.sortBy(_._1).map{
                case (k, Some(v)) => <span>&nbsp;<strong>{k}</strong>-<em>{v}</em>&nbsp;|</span>
                case (k, None) => <span>&nbsp;<strong>{k}</strong>-<em>Unknown...</em>&nbsp;|</span>
                case (k, v) if k.trim.matches("^x[A-Z].*$") => <span>&nbsp;<strong>{k.drop(1).head.toString.toLowerCase+k.drop(1).tail}</strong>-<em>{v}</em>&nbsp;|</span>
                case (k, v) => <span>&nbsp;<strong>{k}</strong>-<em>{v}</em>&nbsp;|</span>
                  }
                }.
              </p>
          }
          </div>
        </footer>
        </div>

        @script
    </body>
</html>
